<style>
 .white-input.el-input.is-disabled .el-input__inner{
     border: 0px;
     outline:none;
     cursor: pointer;
     background: #fff;
     color: #606266;
 }
.white-input.el-textarea.is-disabled .el-textarea__inner{
	 border: 0px;
     outline:none;
     cursor: pointer;
     background: #fff;
	 color: #606266; 
	 resize: none;
 }
 .white-input::before{
     content:':';
     color: #606266;
     position: absolute;
 }
</style>

<template>
	<section>
		<Row >			
			<!--工具条-->
			<Row>
			<el-col :span="23" class="toolbar toolMarginTop" id="serachId">
				<el-form :inline="true" :model="filters">
					<!-- <el-button plain @click="ApplicationType" style="float:left;">分类注册</el-button> -->
					<el-form-item style="float:right">
						<el-button type="primary" size="small" v-on:click="getList">查询</el-button>						
					</el-form-item>
					<el-form-item style="float:right">
						<el-input v-model="filters.className" size="small" placeholder="请输入同步系统名称"  @keyup.enter.native="searchEnterFun"></el-input>
					</el-form-item>
				</el-form>
			</el-col>
			</Row>
			<el-row class="tac  toolbar">
			<el-col :span="4">
			<!-- 13123464879846 -->
			<!-- <el-tree @check-change="toGetList" node-key="marketCode" ref="tree" :load="loadData" :props="defaultProps"   lazy  show-checkbox></el-tree> -->
			</el-col>
			<el-col :span="23" class="titleLineSymbolTwo" >
				<!--列表-->
				<el-table :data="tableData" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
					<el-table-column type="index" label="序号" width="60">
					</el-table-column>
					<el-table-column prop="syschSys" label="同步系统" width="350">
					</el-table-column>					
					<el-table-column prop="downloadDate" label="同步时间" >
					</el-table-column>		
					<el-table-column prop="operateType" label="操作类型">
					</el-table-column>
					<el-table-column prop="syschState" label="状态">
					</el-table-column>												
					<el-table-column label="操作" width="150">
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="ApplicationTypeEdit(scope.$index, scope.row)">详情</el-button>
							<el-button type="text" size="small" @click="ApplicationTypeDelete(scope.$index, scope.row)">手工同步</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!--工具条-->
				<el-col :span="23" class="toolbar marginTop10px">
					<el-pagination layout="total, prev, pager, next, jumper" @current-change="handleCurrentPageChange"
									:current-page="pageNum" :page-size="pageSize" :total="total">
					</el-pagination>
				</el-col>
			</el-col>
			</el-row>


			<!--编辑界面-->
			<!-- <el-dialog title="分类编辑" :visible.sync="editFormVisible" :modal-append-to-body="false"> -->
			<Modal v-model="editFormVisible" title="日志详情" width='50%'>
			
				<el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">
                                         
                    <el-row>
						<el-col :span="12">
							<el-form-item label="同步系统" >
								<el-input v-model="editForm.syschSys" auto-complete="off" :disabled="true" class="white-input"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="同步时间" >
								<el-input v-model="editForm.syschDate" :disabled="true" class="white-input"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
                    <el-row>
						<el-col :span="12">
							<el-form-item label="操作类型" >
								<el-input v-model="editForm.operateType" auto-complete="off" :disabled="true" class="white-input"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="同步状态" >
								<el-input v-model="editForm.syschState" :disabled="true" class="white-input"></el-input>
							</el-form-item>
						</el-col>
					</el-row>         			
				    <el-form-item label="访问令牌" >
								<el-input v-model="editForm.token" auto-complete="off" :disabled="true" class="white-input"></el-input>
							</el-form-item>
					<el-form-item label="请求报文">
						<el-input  v-model="editForm.request" :disabled="true" type="textarea" class="white-input" ></el-input>
					</el-form-item>
					<el-form-item label="应答报文">
						<el-input  v-model="editForm.response" :disabled="true" type="textarea" class="white-input"></el-input>
					</el-form-item>
				</el-form>
				
				<div slot="footer" class="dialog-footer">
					<!-- <el-button @click.native="editFormVisible = false">取消</el-button>
					<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button> -->
				</div>
			</Modal>
			<!-- </el-dialog> -->

			
		</Row>
	</section>
</template>

<script>
//:disabled="this.fileUrl==='0'"
	import utils from '../api/utils'
	import  checks  from '../api/checks'
	//import NProgress from 'nprogress'
	import { getApplicationTypeList,addApplicationType,editApplicationType,deleteApplicationType,getMarketList } from '../api/api';

	export default {
		data() {
			return {
				filters: {
					className: ''
				},
				tableData: [],
				total: 0,
				pageNum: 1,
				pageSize:10,
				listLoading: false,
				sels: [],//列表选中列
				market:[],//所有市场
				superClassList:[],//所有分类

				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				editFormRules: {
					className: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					]
				},
				//编辑界面数据
				editForm: {
					className : '',
					superClass : '',
					logo : '',
					isShow : -1,
					marketCode : '',
					sort : -1,
					remark : ''
				},

				addFormVisible: false,//新增界面是否显示
				addLoading: false,
				addFormRules: {
					className: [
						{ required: true, message: '请输入分类名称', trigger: 'blur' }
					]
				},
				//新增界面数据
				addForm: {
					className : '',
					superClass : '',
					logo : '',
					isShow : -1,
					marketCode : '',
					sort : -1,
					remark : '',
					
				},
				defaultProps: {
					label: 'marketName',
					isLeaf: 'leaf',
				},
				fileList: [],
				paramData:{sys:1,module:3,keyId:""},
				fileUrl:'',

				addOrEdit:0,
				uploadUrl:'',
			}
		},
		methods: {
			formatIsShow: function (row, column) {
				return row.isShow == 1 ? '是' : row.isShow == 0 ? '否' : '未知';
			},
			formatCreateDate: function (row, column) {
				return row.createDate = (!row.createDate || row.createDate == '') ? '' : checks.formatDate(new Date(row.createDate), 'yyyy-MM-dd hh:mm:ss');
			},
			formatUpdateDate: function (row, column) {
				return row.updateDate = (!row.updateDate || row.updateDate == '') ? '' : checks.formatDate(new Date(row.updateDate), 'yyyy-MM-dd hh:mm:ss');
			},
			handleCurrentPageChange: function (pageNum) {// 翻页动作
                this.pageNum = pageNum;
                this.getList();// 翻页后刷新页面数据
			},
			inputChange: function (name,id,form) {
				checks.checkNum(name,id,form,0,this);
			},
			//实现回车键搜索功能
			searchEnterFun:function(e){
				this.getList();
            },
			//获取列表
			getList() {
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					className: this.filters.className,
					// marketCodeList:this.$refs.tree.getCheckedKeys()
				};
				this.listLoading = true;
				//NProgress.start();
				getApplicationTypeList(params).then(function(result){
                    let obj=[{"appMarket":"永州市应用市场 ","appName":"车辆核查","appVersion":"V1.02","deviceSys":"IOS","userName":"罗成","downloadPlace":"永州市公安局 ","phoneType":"iphone","downloadDate":" 2018-06-09 13:21:22","deviceImel":"85855220","phoneNumer":"18551332724","token":"782b7d52-9d82-4661-8269-11op212e23we","safeCard":"295664801","request":"bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et kafka justo commodo","response":"bibendum laoreet. Proin gravida dolor sit amet lacus s3 et viverra justo commodo","syschSys":"涉车系统应用系统","syschDate":" 2018-05-10 18:51:47","operateType":"应用监控","syschState":"成功","moduleName":"车辆核查","address":"20.92.65.84","serviceState":"正常","cpu":"66%","cache":"75%","access":"93","byte":"243","startDate":" 2018-06-08 09:52:41","recordDate":" 2018-06-08 09:56:41","endDate":" 2018-06-08 09:58:42"},
{"appMarket":"怀化市应用市场  ","appName":"巡逻盘查","appVersion":"V1.03","deviceSys":"Android","userName":"蓝兰","downloadPlace":"怀化市公安局  ","phoneType":"HuaWei","downloadDate":" 2018-06-09 13:21:23","deviceImel":"85855221","phoneNumer":"18551332725","token":"782b7d52-9d82-4661-8269-11op212e23we","safeCard":"295664802","request":"bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et kafka justo commodo","response":"bibendum laoreet. Proin gravida dolor sit amet lacus s3 et viverra justo commodo","syschSys":"飞识人像识别系统","syschDate":" 2018-05-10 18:51:47","operateType":"应用监控","syschState":"成功","moduleName":"巡逻盘查","address":"20.92.65.84","serviceState":"正常","cpu":"67%","cache":"76%","access":"95","byte":"2059","startDate":" 2018-06-08 09:52:42","recordDate":" 2018-06-08 09:56:42","endDate":" 2018-06-08 09:58:43"},
{"appMarket":"娄底市应用市场","appName":"百度地图","appVersion":"V1.04","deviceSys":"Android","userName":"陈煊成","downloadPlace":"娄底市公安局","phoneType":"HuaWei","downloadDate":" 2018-06-09 13:21:24","deviceImel":"85855222","phoneNumer":"18551332726","token":"782b7d52-9d82-4661-8269-11op212e23we","safeCard":"295664803","request":"bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et kafka justo commodo","response":"bibendum laoreet. Proin gravida dolor sit amet lacus s3 et viverra justo commodo","syschSys":"娱乐服务场所治安管理信息系统","syschDate":" 2018-05-10 18:51:47","operateType":"应用监控","syschState":"成功","moduleName":"百度地图","address":"20.92.65.84","serviceState":"正常","cpu":"68%","cache":"77%","access":"63","byte":"228","startDate":" 2018-06-08 09:52:43","recordDate":" 2018-06-08 09:56:43","endDate":" 2018-06-08 09:58:44"},
{"appMarket":"冷水江市应用市场  ","appName":"新闻","appVersion":"V1.05","deviceSys":"Android","userName":"李大同","downloadPlace":"冷水江市公安局  ","phoneType":"HuaWei","downloadDate":" 2018-06-09 13:21:25","deviceImel":"85855223","phoneNumer":"18551332727","token":"782b7d52-9d82-4661-8269-11op212e23we","safeCard":"295664804","request":"bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et kafka justo commodo","response":"bibendum laoreet. Proin gravida dolor sit amet lacus s3 et viverra justo commodo","syschSys":"保安服务监管信息系统","syschDate":" 2018-05-10 18:51:47","operateType":"应用监控","syschState":"成功","moduleName":"新闻","address":"20.92.65.84","serviceState":"正常","cpu":"69%","cache":"78%","access":"56","byte":"65","startDate":" 2018-06-08 09:52:44","recordDate":" 2018-06-08 09:56:44","endDate":" 2018-06-08 09:58:45"},
{"appMarket":"涟源市应用市场  ","appName":"万年历","appVersion":"V1.06","deviceSys":"Android","userName":"彭怀义","downloadPlace":"涟源市公安局  ","phoneType":"HuaWei","downloadDate":" 2018-06-09 13:21:26","deviceImel":"85855224","phoneNumer":"18551332728","token":"782b7d52-9d82-4661-8269-11op212e23we","safeCard":"295664805","request":"bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et kafka justo commodo","response":"bibendum laoreet. Proin gravida dolor sit amet lacus s3 et viverra justo commodo","syschSys":"公安部合成作战轻应用JS系统","syschDate":" 2018-05-10 18:51:47","operateType":"应用监控","syschState":"成功","moduleName":"万年历","address":"20.92.65.84","serviceState":"正常","cpu":"70%","cache":"79%","access":"43","byte":"134","startDate":" 2018-06-08 09:52:45","recordDate":" 2018-06-08 09:56:45","endDate":" 2018-06-08 09:58:46"},
{"appMarket":"吉首市应用市场","appName":"省级核查","appVersion":"V1.07","deviceSys":"Android","userName":"邓黎熊","downloadPlace":"吉首市公安局","phoneType":"HuaWei","downloadDate":" 2018-06-09 13:21:27","deviceImel":"85855225","phoneNumer":"18551332729","token":"782b7d52-9d82-4661-8269-11op212e23we","safeCard":"295664806","request":"bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et kafka justo commodo","response":"bibendum laoreet. Proin gravida dolor sit amet lacus s3 et viverra justo commodo","syschSys":"保安服务监管信息系统","syschDate":" 2018-05-10 18:51:47","operateType":"应用监控","syschState":"成功","moduleName":"省级核查","address":"20.92.65.84","serviceState":"正常","cpu":"71%","cache":"41%","access":"671","byte":"396","startDate":" 2018-06-08 09:52:46","recordDate":" 2018-06-08 09:56:46","endDate":" 2018-06-08 09:58:47"},
{"appMarket":"永州市应用市场 ","appName":"车辆核查","appVersion":"V1.02","deviceSys":"IOS","userName":"罗成","downloadPlace":"永州市公安局 ","phoneType":"iphone","downloadDate":" 2018-06-09 13:21:22","deviceImel":"85855220","phoneNumer":"18551332724","token":"782b7d52-9d82-4661-8269-11op212e23we","safeCard":"295664801","request":"bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et kafka justo commodo","response":"bibendum laoreet. Proin gravida dolor sit amet lacus s3 et viverra justo commodo","syschSys":"枪支管理信息系统","syschDate":" 2018-05-10 18:51:47","operateType":"应用监控","syschState":"成功","moduleName":"车辆核查","address":"20.92.65.84","serviceState":"正常","cpu":"66%","cache":"42%","access":"243","byte":"243","startDate":" 2018-06-08 09:52:41","recordDate":" 2018-06-08 09:56:41","endDate":" 2018-06-08 09:58:42"},
{"appMarket":"怀化市应用市场  ","appName":"巡逻盘查","appVersion":"V1.03","deviceSys":"Android","userName":"蓝兰","downloadPlace":"怀化市公安局  ","phoneType":"HuaWei","downloadDate":" 2018-06-09 13:21:23","deviceImel":"85855221","phoneNumer":"18551332725","token":"782b7d52-9d82-4661-8269-11op212e23we","safeCard":"295664802","request":"bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et kafka justo commodo","response":"bibendum laoreet. Proin gravida dolor sit amet lacus s3 et viverra justo commodo","syschSys":"旅馆业治安管理信息系统","syschDate":" 2018-05-10 18:51:47","operateType":"应用监控","syschState":"成功","moduleName":"巡逻盘查","address":"20.92.65.84","serviceState":"正常","cpu":"67%","cache":"43%","access":"2059","byte":"2059","startDate":" 2018-06-08 09:52:42","recordDate":" 2018-06-08 09:56:42","endDate":" 2018-06-08 09:58:43"}]			//this.tableData = result.data.list.map(item=> Object.assign({},item,obj)  );
					this.tableData =obj;
					this.pageNum = result.data.pageNum;
					this.pageSize = result.data.pageSize;
					this.total = 8;
					this.listLoading = false;
				}.bind(this)).catch(function (error) {
					this.listLoading = false;
					console.log(error);
				}.bind(this));
			},
			//删除
			ApplicationTypeDelete: function (index, row) {
				this.$confirm('确认同步该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let params = {classCode:row.classCode};
					// deleteApplicationType(params).then((res) => {
					// 	if(res.code == 'B100001'){
					// 		this.$message({
					// 			message: "应用分类正在使用，不允许删除！",
					// 			type: 'info'
					// 		});
					// 	}else{
					// 		//NProgress.done();
					// 		this.$message({
					// 			message: '删除成功',
					// 			type: 'success'
					// 		});
					// 	}
					// 	this.listLoading = false;
					// 	this.getList();
                    // });
                 
                    setTimeout(()=>{
                            this.$message({
								message: '同步成功',
								type: 'success'
							});
                            this.listLoading = false;
                            this.getList();
                    },1000);
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消同步'
					}); 
				});
			},	
			//显示编辑界面
			ApplicationTypeEdit: function (index, row) {
				this.editFormVisible = true;
				this.getmarketList();
				// this.getAllSuperClassList(row.classCode);
				let testId = document.getElementById("testId");
				if(testId != undefined){
					document.getElementById("editId").removeChild(testId);
				}
				this.addOrEdit = 1;
				if(row.logo != null && row.logo != ""){
					let div = document.createElement('div');
					let html = '<img width="100%" src="'+row.logo+'" alt="" style="width: 100px;height: 100px;" class="test">';
					div.innerHTML = html;
					div.id = 'testId';
					document.getElementById("editId").appendChild(div);
				}
				this.editForm = Object.assign({}, row);
			},
			//显示新增界面
			ApplicationType: function () {
				let testId = document.getElementById("testId");
				if(testId != undefined){
					document.getElementById("addId").removeChild(testId);
				}
				this.fileUrl = '';
				this.fileList = [];
				this.addOrEdit = 0;
				this.addForm = {
					className : '',
					superClass : '',
					logo : '',
					isShow : 1,
					marketCode : '',
					sort : 0,
					remark : ''
				};
				this.getmarketList();
				// this.getAllSuperClassList('no');
				this.addFormVisible = true;
			},
			//查所有市场
			getmarketList() {
				let params = {
					pageNum: 1,
					pageSize: 10000,
					marketName: ''
				};
				getMarketList(params).then(function(result){
					this.market = result.data.list;
				}.bind(this)).catch(function (error) {
					console.log(error);
				}.bind(this));
			},
			//查所有分类
			getAllSuperClassList(classCode) {
				if(classCode == 'no'){
					classCode = '';
				}
				let params = {
					pageNum: 1,
					pageSize: 10000,
					notSelf:classCode
				};
				//NProgress.start();
				getApplicationTypeList(params).then(function(result){
					this.superClassList = result.data.list;
				}.bind(this)).catch(function (error) {
					console.log(error);
				}.bind(this));
			},
			//编辑
			editSubmit: function () {
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							//NProgress.start();
							let params = Object.assign({}, this.editForm);
							params.createDate = Date.parse(new Date(params.createDate));
							if(params.updateDate != ''){
								params.updateDate = Date.parse(new Date(params.updateDate));
							}
							params.logo = this.fileUrl;
							editApplicationType	(params).then((res) => {
								this.editLoading = false;
								//NProgress.done();
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['editForm'].resetFields();
								this.editFormVisible = false;
								this.getList();
							});
						});
					}
				});
			},
			//新增
			addSubmit: function () {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							//NProgress.start();
							let params = Object.assign({}, this.addForm);
							params._logo = this.fileUrl;
							//params.file = document.getElementById('file').files;
							addApplicationType(params).then((res) => {
								if(res.code == 'B100001'){
									this.$message({
										message: "市场下已存在该分类！",
										type: 'info'
									});
								}else{
									//NProgress.done();
									this.$message({
										message: '提交成功',
										type: 'success'
									});
								}
								this.addLoading = false;
								this.$refs['addForm'].resetFields();
								this.addFormVisible = false;
								this.getList();
							});
						});
					}
				});
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
			//批量删除
			batchRemove: function () {
				var ids = this.sels.map(item => item.id).toString();
				this.$confirm('确认删除选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para = { ids: ids };
					batchRemoveUser(para).then((res) => {
						this.listLoading = false;
						//NProgress.done();
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.getUsers();
					});
				}).catch(() => {

				});
			},
			toGetList:function(){
				this.getList();
			},
			loadData(node,resolve){
				let rootName = '市场';
				if(node.level ===0){
					resolve([{marketName:rootName}]);
					return;
				}

				if(node.data.marketName===rootName){
					let params ={
						marketName:'',
					}
					getMarketList(params).
					then(res => {
						res.data.list.map(item=>{item.leaf=true;});
						resolve(res.data.list);
					}).catch(function (error) {
						this.$message.warning('系统异常 ');
					});
					return;
				}
				return;
			},
			submitUpload() {
                this.paramData.keyId="9999999999999999999999";
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
				this.fileUrl = '';
				let testId = document.getElementById("testId");
				if(this.addOrEdit === 0){
					document.getElementById("addId").removeChild(testId);
				}
				if(this.addOrEdit === 1){
					document.getElementById("editId").removeChild(testId);
				}
                console.log("移除文件");
                console.log(file, fileList);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            handlePreview(file) {
                console.log("点击文件");
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            uploadSuccess(response, file, fileList){
				let testId = document.getElementById("testId");
				this.fileUrl = response.data.fileUri;
				//<img width="100%" :src="fileUrl" alt="" style="width: 100px;height: 100px; display:none" class="test">
				let div = document.createElement('div');
				let html = '<img width="100%" src="'+this.fileUrl+'" alt="" style="width: 100px;height: 100px;" class="test">';
				div.innerHTML = html;
				div.id = 'testId';
				if(this.addOrEdit === 0){
					if(testId != undefined){
						document.getElementById("addId").removeChild(testId);
					}
					document.getElementById("addId").appendChild(div);
				}
				if(this.addOrEdit === 1){
					if(testId != undefined){
						document.getElementById("editId").removeChild(testId);
					}
					document.getElementById("editId").appendChild(div);
				}
                console.log(response)
            },
		},
		mounted() {
			this.getList();
			this.uploadUrl = utils.uploadUrl(); //设置图片上传地址
		},
		created(){
		}
	}

</script>
